<template>
  <div class="gauge-ability-wrapper" :style="containerStyle">
    <v-chart ref="chartRef" :option="chartOption" :style="chartStyle" autoresize />
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { use } from 'echarts/core';
import * as echarts from 'echarts';
import { CanvasRenderer } from 'echarts/renderers';
import { GaugeChart } from 'echarts/charts';
import { TitleComponent, TooltipComponent, LegendComponent } from 'echarts/components';
import VChart from 'vue-echarts';
import { useAutoDataBinding } from '@/composables/use-data-binding';

// 注册ECharts组件
use([CanvasRenderer, GaugeChart, TitleComponent, TooltipComponent, LegendComponent]);

// Props定义
interface Props {
  value?: number;
  updateTime?: string;
  themeColor?: string;
  dataBinding?: any;
}

const props = withDefaults(defineProps<Props>(), {
  value: 65,
  updateTime: '2017-11-14',
  themeColor: '#6eba44'
});

// 图表引用
const chartRef = ref<InstanceType<typeof VChart>>();

// 响应式属性（用于数据绑定）
const componentProps = computed(() => ({
  value: props.value,
  updateTime: props.updateTime,
  themeColor: props.themeColor
}));

// 数据绑定
const dataBinding = useAutoDataBinding(
  props.dataBinding?.enabled ? props.dataBinding : null,
  componentProps
);

// 样式计算
const containerStyle = computed(() => ({
  width: '100%',
  height: '100%',
  minHeight: '400px'
}));

const chartStyle = computed(() => ({
  width: '100%',
  height: '100%'
}));

// 能力值仪表盘配置
const chartOption = computed(() => {
  const gauge_value = componentProps.value.value;
  const updateTime = componentProps.value.updateTime;
  const themeColor = componentProps.value.themeColor;

  return {
    backgroundColor: '',
    title: {
      show: true,
      x: 'center',
      y: '62%',
      text: `${updateTime}`,
      textStyle: {
        fontSize: 14,
        fontWeight: 'bolder',
        fontStyle: 'normal',
        color: themeColor
      }
    },
    tooltip: {
      show: true,
      formatter: '{a}{b}：{c}',
      backgroundColor: themeColor,
      borderColor: themeColor,
      borderWidth: '1px',
      textStyle: {
        color: 'white'
      }
    },
    series: [
      {
        name: '能力',
        type: 'gauge',
        splitNumber: 10,
        min: 0,
        max: 100,
        radius: '65%',
        axisLine: {
          show: true,
          lineStyle: {
            width: 4,
            shadowBlur: 0,
            color: [
              [0.2, themeColor],
              [0.8, themeColor],
              [1, themeColor]
            ]
          }
        },
        axisTick: {
          show: true,
          lineStyle: {
            color: themeColor,
            width: 1
          },
          length: 10,
          splitNumber: 2
        },
        splitLine: {
          show: true,
          length: 20,
          lineStyle: {
            color: themeColor
          }
        },
        axisLabel: {
          distance: 0,
          textStyle: {
            color: themeColor,
            fontSize: '24'
          },
          formatter: function (e: any) {
            return e;
          }
        },
        pointer: {
          show: true
        },
        detail: {
          show: true,
          offsetCenter: [0, 40],
          textStyle: {
            fontSize: 50,
            color: themeColor
          }
        },
        title: {
          textStyle: {
            fontSize: 30,
            fontWeight: 'bolder',
            fontStyle: 'normal',
            color: themeColor
          },
          offsetCenter: [0, 15]
        },
        data: [
          {
            name: '',
            value: Math.floor(gauge_value)
          }
        ]
      }
    ]
  };
});

onMounted(() => {
  // 确保图表可以正确响应尺寸变化
  if (chartRef.value) {
    // 延迟调用resize确保图表正确渲染
    setTimeout(() => {
      chartRef.value?.resize();
    }, 100);
  }
});
</script>

<style scoped>
.gauge-ability-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

.gauge-ability-wrapper > div {
  width: 100% !important;
  height: 100% !important;
}
</style>
